<template>
  <div class="page-wrapper">
    <div class="page-title"><span class="title-bar"></span> 操作列表</div>
 
    <div class="card table-card">
      <el-table :data="data" class="role-table" style="width: 100%">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="仓库" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="specification" label="规格型号" align="center"></el-table-column>
         <el-table-column prop="userName" label="管理员" align="center"></el-table-column>
          <el-table-column prop="depaName" label="职位" align="center"></el-table-column>
          <el-table-column prop="quantity" label="库存" align="center"></el-table-column>

      </el-table>
      <div class="pagination-card">
        <el-pagination
          v-model:current-page="Page.PageIndex"
          v-model:page-size="Page.PageSize"
          :page-sizes="[15, 20, 25, 30]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Page.totalCount"
          prev-text="上一页"
          next-text="下一页"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { read } from '@/stores/host';
import axios from 'axios';
import moment from 'moment';
import { onMounted, reactive, ref, watch } from 'vue';
const Page=reactive({
totalPage:0,
totalCount:0,
PageIndex:1,
PageSize:15
})

const getrole=()=>{
  read.get("allocateread/api/Transfe/GeInventory",{params:{
  PageIndex:Page.PageIndex,
  PageSize:Page.PageSize
}})
.then(res=>{
  data.value=res.data.data
  Page.totalCount=res.data.totalCount
  Page.totalPage=res.data.totalPage
})
}
onMounted(()=>{
    getrole();
  })
watch(Page,()=>{
  getrole();
})
const data = ref([{
    id:0,
    menuName:''
}]) 


</script>

<style scoped>
.page-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 0;
}
.page-title {
  font-size: 2rem;
  font-weight: bold;
  color: #4f8cff;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.title-bar {
  display: inline-block;
  width: 6px;
  height: 28px;
  background: #4f8cff;
  border-radius: 4px;
  margin-right: 14px;
}
.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(79, 140, 255, 0.10);
  margin-bottom: 24px;
  padding: 24px 28px;
}
.search-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.table-card {
  padding: 0 0 24px 0;
}
.add-btn {
  border-radius: 16px !important;
  font-size: 1rem;
  font-weight: 500;
}
.role-table {
  border-radius: 16px !important;
  overflow: hidden;
}
.el-table th {
  background: #f4f8ff !important;
  font-weight: bold;
  font-size: 1.05rem;
  color: #4f8cff;
}
.el-table .el-table__row {
  transition: background 0.2s;
}
.el-table .el-table__row:hover {
  background: #eaf4ff !important;
}
.op-btn {
  border-radius: 12px !important;
  margin: 0 4px;
  font-size: 0.95rem;
}
.pagination-card {
  display: flex;
  justify-content: center;
  margin: 32px 0 0 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(79, 140, 255, 0.08);
  padding: 16px 0;
}
.dialog-card {
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(79, 140, 255, 0.15) !important;
}
.dialog-footer .el-button {
  border-radius: 14px !important;
  min-width: 90px;
}
.op-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
</style>